<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <script src="https://unpkg.com/vue@2.6.14/dist/vue.min.js"></script>

  <script src="https://cdn.staticfile.org/axios/0.18.0/axios.min.js"></script>
</head>
<body>
<div id="app">
  <script src="https://video.sdk.qcloudecdn.com/web/TXLivePusher-2.0.4.min.js" charset="utf-8"></script>
  <div id="id_local_video" style="width:100%;height:500px;display:flex;align-items:center;justify-content:center;">

  </div>
  <!--<button @click="liu">开</button>-->
  <button @click="startScreen">开启桌面共享</button><br>
  <button @click="startCamera">开启摄像头</button>&emsp;&emsp;<button @click="stopCamera">关闭摄像头</button><br>
  <button @click="startMicrophone">开启麦克风</button>&emsp;&emsp;<button @click="stopMicrophone">关闭麦克风</button><br>
  <button @click="startPushing">开启直播</button>&emsp;&emsp;<button @click="stopPushing">关闭直播</button>
</div>

<script>
  new Vue({
    el:'#app',
    data:{
      livePusher:null,
      path:'',
      videoEffectManager:null,
      cameraStreamId:null,
      screenStreamId:null

    },
    methods:{
      startScreen(){
        this.livePusher.startScreenCapture().then((streamId) => {
          this.screenStreamId = streamId;
          alert('屏幕分享成功');
        }).catch((error) => {
          alert('屏幕分享失败：'+ error.toString());
        });

      },

      startCamera(){
        this.livePusher.startCamera().then((streamId) => {
          this.cameraStreamId = streamId;
          alert("已开启")
        }).catch((error) => {
          alert('打开摄像头失败：'+ error.toString());
        });


        //设置镜像效果
        this.videoEffectManager.setMirror({
          streamId: this.cameraStreamId,
          mirrorType: 1
        });


      },
      stopCamera(){
        //关闭摄像头
        alert("关闭摄像头")
        this.livePusher.stopCamera();


      },
      startMicrophone(){
        // 打开麦克风
        this.livePusher.startMicrophone().then(function () {
          alert("已开启")
        })
      },
      stopMicrophone(){
        // 关闭麦克风
        alert("关闭麦克风")
        this.livePusher.stopMicrophone();
      },
      startPushing(){

        if (this.screenStreamId!=null){
          this.videoEffectManager.setLayout([{
            streamId: this.screenStreamId,
            x: 640,
            y: 360,
            width: 1280,
            height: 720,
            zOrder: 1
          }, {
            streamId: this.cameraStreamId,
            x: 160,
            y: 90,
            width: 320,
            height: 180,
            zOrder: 2
          }]);
        }




        //开始推流
        this.livePusher.startPush(this.path);
        alert(this.path)
      },
      stopPushing(){
        alert("直播已关闭")
        this.livePusher.stopPush(this.path);
      },
      /*liu(){
          axios.get("http://localhost:9302/sinatv/begin").then((resp)=>{
              this.path=resp.data.msg
          })
      }*/
    },
    created(){

      axios.get("http://localhost:9302/sinatv/begin").then((resp)=>{
        this.path=resp.data.msg
      })

      this.livePusher = new TXLivePusher();
      this.livePusher.setRenderView('id_local_video');
      // 设置视频质量
      this.livePusher.setVideoQuality('720p');
      // 设置音频质量
      this.livePusher.setAudioQuality('standard');
      // 自定义设置帧率
      this.livePusher.setProperty('setVideoFPS', 25);
      // 打开摄像头
      //this.livePusher.startCamera();
      // 打开麦克风
      //this.livePusher.startMicrophone();



      //获取视频效果管理实例
      this.videoEffectManager = this.livePusher.getVideoEffectManager();

      this.videoEffectManager.enableMixing(true);

      this.videoEffectManager.setMixingConfig({
        videoWidth: 1280,
        videoHeight: 720,
        videoFramerate: 25
      });


    }
  })
</script>

</body>
</html>
